<template>
	<div>
		<van-nav-bar title="地址列表" left-arrow @click-left="onClickBack" @click-right="onClickRight">
			<template #right>
				<div>删除</div>
			</template>
		</van-nav-bar>
		<div>
			<van-cell-group>
				<van-field v-model="name" label="收货人" placeholder="请输入用户名" />
			</van-cell-group>
			<van-cell-group>
				<van-field v-model="phone" label="手机号码" placeholder="请输入手机号码" />
			</van-cell-group>
			<divdir></divdir>
			<van-cell-group>
				<van-field v-model="city" label="所在地区" disabled placeholder="请选择所在地区" @click="changeAddress" />
			</van-cell-group>
			<!-- 选择地址弹出层 -->
			<van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">
				<van-area title="请选择省市区" :area-list="areaList" @cancel="cancel" @confirm="confirm" />
			</van-popup>
			<van-cell-group>
				<van-field v-model="address" label="详细地址" placeholder="请输入详细地址" />
			</van-cell-group>
			<van-cell>
				<!-- 使用 title 插槽来自定义标题 -->
				<template #title>
					<div>设为默认地址：</div>
				</template>
				<template #extra>
					<div>
						<van-switch v-model="checked" active-color="#FD6801" />
					</div>
				</template>
			</van-cell>
			<div class="pl-1 pr-1">
				<button class="save-address w-100 pt-1 pb-1" @click="saveAddress()">保存</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		areaList
	} from '@vant/area-data';
	import {
		Dialog
	} from 'vant';
	import {
		addressList,
		useraddress,
		updateaddress,
		deladdress
	} from '../lib/address.js'
	import {
		Notify
	} from 'vant';
	export default {
		data() {
			return {
				name: "",
				phone: "",
				city: "",
				show: false,
				areaList,
				addressList: [],
				address: "",
				checked: true,
			}
		},
		computed: {
			defaultNum() {
				if (this.checked) {
					return 1
				} else {
					return 0
				}
			}
		},
		created() {
			let item = this.$route.query.item;
			if (item) {
				this.name = item.name;
				this.phone = item.phone;
				this.city = item.province + " " + item.city + " " + item.district;
				this.address = item.address;
				this.addressList = [{
					name: item.province
				}, {
					name: item.city
				}, {
					name: item.district
				}]
			}
		},
		methods: {
			onClickBack() {
				this.$router.go(-1)
			},
			onClickRight() {
				Dialog.confirm({
						title: "地址删除",
						message: `你确定要删除${this.$route.query.item.name}这条地址信息么`,
					})
					.then(() => {
						deladdress({
							id: this.$route.query.item.id
						}).then(res => {
							this.onClickBack()
						})
					})
					.catch(() => {
						console.log("取消删除")
					});

			},
			changeAddress() {
				this.show = true;
			},
			cancel(e) {
				this.show = false
			},
			confirm(e) {
				this.addressList = e;
				let city = ""
				for (let i = 0; i < e.length; i++) {
					city += e[i].name + " ";
				}
				console.log(this.addressList)
				this.city = city;
				this.show = false;
			},
			saveAddress() {
				if (this.name === "") {
					Notify({
						type: 'warning',
						message: '请输入收货人'
					});
				} else if (this.phone === "") {
					Notify({
						type: 'warning',
						message: '请输入电话号码'
					});
				} else if (this.city === "") {
					Notify({
						type: 'warning',
						message: '请选择省市区'
					});
				} else if (this.address === "") {
					Notify({
						type: 'warning',
						message: '请填写详细地址'
					});
				} else {
					let idfalg = this.checkNullObj(this.$route.query)
					let _id = 0;
					if (idfalg) {
						_id = 1
					} else {
						_id = this.$route.query.item.id
					};
					let options = {
						province: this.addressList[0].name,
						city: this.addressList[1].name,
						district: this.addressList[2].name,
						address: this.address,
						zip: 0,
						name: this.name,
						phone: this.phone,
						default: this.defaultNum
					}
					if (_id === 1) {
						useraddress({ ...options
						}).then(res => {
							this.onClickBack()
						})
					} else {
						options.id = _id;
						updateaddress({ ...options
						}).then(res => {
							console.log(res);
							this.onClickBack()
						})
					}

				}
			},
			checkNullObj(obj) {
				return Object.keys(obj).length === 0
			}
		}
	}
</script>

<style scoped>
	.save-address {
		color: #FFFFFF;
		background-color: #FD6801;
		border: none;
		border-radius: 5px;
	}
</style>
